<div class="slide-dialog-header">
	<h2>{{title}}</h2>
	<div class="slide-dialog-toolbar">
		<ul>
			<!-- <li><span class="ui-btn"><i class="fa fa-tag"></i><span class="btn-text">标签</span></span></li>
			<li><span class="ui-btn"><i class="fa fa-paperclip"></i><span class="btn-text">附件</span></span></li>
			<li class="x-toobar-sep"></li> -->
			<li><span class="ui-btn slide-dialog-close" ng-click="close(false)"><i class="fa fa-remove"></i></span></li>
		</ul>
	</div>
</div>
<div class="slide-dialog-body">
	<form name="form" novalidate="novalidate" ng-submit="submit(form.$valid);">
		<div class="data-panel">
			<div class="data-panel-header">
				<h2><i class="fa fa-flag"></i><span class="x-text">基本属性</span></h2>
				<div class="data-panel-toolbar">
					<span class="x-button" ng-if="state.editModel && state.editable === false" ng-click="edit()"><span class="btn-text">修改属性</span></span>
				</div>
			</div>
			<div class="data-panel-body">
				<div class="data-table" ng-if="state.editable === false || (state.editModel && !state.editable)">
					<dl>
						<dt>指标名称：</dt>
						<dd>{{data.metricCode}}</dd>
					</dl>
					<dl>
						<dt>中文名称：</dt>
						<dd>{{data.metricCn}}</dd>
					</dl>
					<dl>
						<dt>数据类型：</dt>
						<dd>{{getDataTypeName(data.fieldType)}}</dd>
					</dl>
					<dl>
						<dt>字段长度：</dt>
						<dd>{{data.fieldLength}}</dd>
					</dl>
				</div>
				<div class="data-form" ng-if="!state.editModel || state.editable">
					<dl>
						<dt><span class="x-star">*</span>指标名称：</dt>
						<dd>
							<input type="text" class="x-ipt" name="metricCode" ng-model="data.metricCode" ng-disabled="data.id" placeholder="请输入指标名称" required ng-pattern="/^[a-zA-Z0-9_]+$/" />
							<div class="x-error" ng-if="interacted(form.metricCode)" ng-messages="form.metricCode.$error">
								<span ng-message="required">指标名称不能为空</span>
								<!--<span ng-message="remote">字段名称已存在</span>-->
								<span ng-message="pattern">不能输入中文或特殊字符</span>
							</div>
						</dd>
					</dl>
					<dl>
						<dt><span class="x-star">*</span>中文名称：</dt>
						<dd>
							<input type="text" class="x-ipt" name="metricCn" ng-model="data.metricCn" ng-disabled="data.id" placeholder="请输入中文名称" required />
							<div class="x-error" ng-if="interacted(form.metricCn)" ng-messages="form.metricCn.$error">
								<span ng-message="required">中文名称不能为空</span>
							</div>
						</dd>
					</dl>
					<dl>
						<dt><span class="x-star">*</span>数据类型：</dt> 
						<dd>
							<select name="fieldType" ng-model="data.fieldType" ng-options="m.value as m.name for m in dataTypes" required>
								<option value="">请选择</option>
							</select>
							<div class="x-error" ng-if="interacted(form.fieldType)" ng-messages="form.fieldType.$error">
                                <span ng-message="required">数据类型不能为空</span>
                            </div>
						</dd>
					</dl>
					<dl>
						<dt><span class="x-star">*</span>指标长度：</dt>
						<dd>
							<input type="text" class="x-ipt" name="fieldLength" ng-model="data.fieldLength" placeholder="请输入指标长度" required ng-pattern="/^[0-9_]+$/"/>
							<div class="x-error" ng-if="interacted(form.fieldLength)" ng-messages="form.fieldLength.$error">
		                    	<span ng-message="required">字段长度不能为空</span>
		                    	<span ng-message="pattern">只能输入正整数</span>
		                    </div>
						</dd>
					</dl>
					<dl>
						<dt>指标描述：</dt>
						<dd>
							<input type="text" class="x-ipt" name="metricDes" ng-model="data.metricDes" placeholder="请输入指标描述" />
						</dd>
					</dl>
				</div>
				<div class="data-tools text-align-left" ng-if="state.editModel && state.editable">
					<button class="dialog-button" type="button" ng-click="save()">保存</button><button class="dialog-button cancel-button" type="button" ng-click="cancel()">取消</button>
				</div>
			</div>
		</div>
		<div class="data-panel">
			<div class="data-panel-header">
				<h2><i class="fa fa-tag"></i><span class="x-text">样式管理</span></h2>
				<div class="data-panel-toolbar">
					<span class="ico-button" ng-click="addStyle()"><i class="fa fa-plus-circle"></i><span class="btn-text">添加样式</span></span>
				</div>
			</div>
			<div class="data-panel-body">
				<div class="x-field" ng-repeat="style in data[styleName] track by $index">
					<div class="x-field-header">
						<h3>{{style.name}}</h3>
						<div class="x-field-tools">
							<span class="x-button" ng-click="editStyle($index, style)"><span class="btn-text">修改</span></span>
							<span class="ico-button" ng-click="removeStyle($index, style)" ng-if="data[styleName] && data[styleName].length > 1" ng-disabled="removing"><i class="fa fa-minus-circle"></i><span class="btn-text">移除</span></span>
						</div>
					</div>
					<div class="x-field-body">
						<div class="x-field-title">控件类型：<em>{{getFormTypeName(style.formType)}}</em></div>
						<div class="x-field-items">
							<div class="x-field-label" ng-if="style.display == '1'">表单显示</div>
							<div class="x-field-label" ng-if="style.display == '0'">表单隐藏</div>
							<div class="x-field-label" ng-if="style.required == '1'">必填</div>
							<div class="x-field-label" ng-if="style.isList=='1'">列表显示</div>
							<div class="x-field-label" ng-if="style.controlsLength">控件长度：<em>{{style.controlsLength}}</em></div>

						</div>
					</div>
				</div>
			</div>
			<div class="data-panel-footer" ng-if="!state.editModel">
				<div class="data-tools">
					<button class="dialog-button cancel-button" type="button" ng-click="close(false)">取消</button><button class="dialog-button" type="submit">提交</button>
				</div>
			</div>
		</div>
	</form>
</div>